a{
    text-decoration: none;
}

@w:1129px;
@title-color: #1c98b0;
.w{
    width: @w;
    margin: 0 auto;
}

.clearfix::before,
.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

body{
    background-color: @title-color;
    padding-bottom: 30px;
}

.inspiration-wrapper{
    height: 66px;
    background-color: @title-color;

    .inspiration-nav{
        height: 100%;
        
        .navflex{
            display: flex;
            justify-content: space-between;

            li{
                width: 100px;
                height: 66px;

                a{
                    display: block;
                    line-height: 66px;
                    text-align: center;
                    color: #d8fffe;
                    &:hover{
                        color: rgb(181, 245, 108,);
                    }
                }
            }
        }
    }
}

// 主体部分
.middle-wrapper{
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;

    // 主图容器
    .mainpicture-img{
        width: 100%;
        height: 635px;
        position: relative;

        // 主图大小
        img{
            position: absolute;
            width: 100%;
            
            vertical-align: top;
        }

        // 轮播点
        .Carousel{
            position: absolute;
            z-index: 10;
            display: flex;
            width: 120px;
            justify-content: space-between;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            transform: translateY(608px);
            
            a{
                display: block;
                width: 20px;
                height: 6px;
                background-color: rgba(0, 0, 0, .3);
                border: 2px solid transparent;
            }

            .a1,
            a:hover{
                background-color: rgba(255, 255, 255, .7);
                border-radius: 2px solid rgba(0, 0, 0, .5);
            }
        }
    }

     // 项目主题内容部分
     .content-inspiration{
        // 上部标题容器
        .tit{
            height: 122px;
            text-align: center;
            line-height: 122px;
            color: @title-color;
            font-size: 25px;
            font-weight: bold;
        }
        // 下部图片容器
        .stills{
            display: flex;
            justify-content: space-around;
            flex-flow: row wrap;

            div{
                margin: 10px 0;
                border-radius: 10px;
                box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            }

            img{
                width: 100%;
                height: 200px;
                border-radius: 10px;
            }
            .stills-img{
                width: 330px;
                height: 200px;
                transition: .4s;
                &:hover{
                    transform: translateY(-3px);
                    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
                }
            }

            .img2{
                width: 330px;
                height: 200px;
                border-radius: 10px;
                margin: 10px 23px;
                overflow: hidden;
                img{
                    transition: .5s;
                    &:hover{
                        transform: scale(1.1);
                    }
                }
               
            }

            .xdh{
                display: flex;
                width: 1129px;
                justify-content: space-around;
                box-shadow: none;
               
                a{
                    display: block;
                    text-align: center;
                    line-height: 100px;
                    font-weight: bold;
                    color: floralwhite;
                }
                .bbox1{
                    width: 330px;
                    height: 200px;
                    box-shadow: none;

                    .nav1{
                        width: 100px;
                        height: 100px;
                        background-color: rgb(223, 93, 93);
                        margin: 0 auto;
                        margin-top: 65px;
                        transform-origin: 10px 10px;
                        transform: rotateZ(35deg);
                        transition: .3s;
                        &:hover{
                            transform: rotateZ(0deg);
                        }
                       
                    }
                }
                .xdh-img{
                    width: 330px;
                    height: 200px;
                    overflow: hidden;
                    img{
                        transition: .5s;
                        &:hover{
                            transform: scale(1.1);
                        }
                    }
                }
                .bbox2{
                    width: 330px;
                    height: 200px;
                    box-shadow: none;

                    .nav2{
                        width: 100px;
                        height: 100px;
                        background-color: rgb(84, 210, 233);
                        margin: 0 auto;
                        margin-top: 65px;
                        transform-origin: 15px 15px;
                        transform: rotateZ(-30deg);
                        transition: .3s;
                        &:hover{
                            transform: rotateZ(0);
                        }
                        
                    }
                }

            }
           
        }
    }
}

